import React, {Component} from 'react';
import {View, Text, TouchableOpacity, StyleSheet, StatusBar} from 'react-native';
import Svg from "react-native-svg-uri";
import SvgData from "../../../../utils/iconSvg";
import icons from '../../../../utils/icon.js'
import {pxToDp} from "../../../../utils/styleKits";
import {NavigationContext} from '@react-navigation/native'

// 交友页，头部三个按钮
class Head extends Component {
  static contextType = NavigationContext;

  state = {
    headData: [
      {
        text: '探花',
        icon: SvgData.peoples,
        backgroundColor: 'red',
        goPage: ()=>this.context.navigate('tanHua'),
      },
      {
        text: '搜附近',
        icon: SvgData.location,
        backgroundColor: 'blue',
        goPage: ()=>this.context.navigate('searchNear'),
      },
      {
        text: '测灵魂',
        icon: SvgData.soul,
        backgroundColor: '#c0b832',
        goPage: ()=>this.context.navigate('testSoul'),
      }
    ]
  };

  render() {
    return <View>
      <StatusBar translucent backgroundColor={"transparent"}/>
      <View style={styles.headBox}>
        {this.renderHeadItem()}
      </View>
    </View>
  }

  // 渲染头部每一个item
  renderHeadItem = () => {
    let {headData} = this.state;
    return headData.map((item, i) => {
      return <TouchableOpacity style={styles.headItem} key={i} onPress={item.goPage}>
        <View style={[styles.headItemIcon, {backgroundColor: item.backgroundColor}]}>
          <Svg svgXmlData={item.icon} fill="#fff" width={pxToDp(34)} height={pxToDp(34)}/>
        </View>
        <Text style={styles.headItemText}>{item.text}</Text>
      </TouchableOpacity>
    });

  }
}

const styles = StyleSheet.create({
  // 头部
  headBox: {
    height: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  headItem: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  headItemIcon: {
    backgroundColor: 'red',
    width: pxToDp(50),
    height: pxToDp(50),
    borderRadius: pxToDp(30),
    justifyContent: 'center',
    alignItems: 'center',
  },
  headItemText: {
    color: '#fff',
  },
});

export default Head;